<template>
  <el-row>
    <el-row>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item label="角色名称">
          <el-input v-model="formInline.roleName" placeholder="角色名称" clearable />
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="formInline.roleCode" placeholder="角色编码" clearable />
        </el-form-item>
        <el-form-item>
          <el-button v-if="hasPerm('system:role:page')" type="primary" @click="onSearch">查询</el-button>
          <el-button v-if="hasPerm('system:role:create')" type="success" @click="dialog.createVisible=true">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        header-row-class-name="headrow"
        border
      >
        <el-table-column
          label="序号"
          width="55"
          align="center"
          :formatter="(row, column, cellValue, index) => index + 1"
        />
        <el-table-column
          prop="roleName"
          label="角色名称"
          width="200"
          align="center"
        />
        <el-table-column
          prop="roleCode"
          label="角色编码"
          width="220"
          align="center"
        />
        <el-table-column
          prop="remark"
          label="备注"
          width="230"
          align="center"
        />
        <el-table-column
          prop="creationTime"
          label="创建时间"
          width="170"
          align="center"
          :formatter="formatterDate"
        />
        <el-table-column
          prop="creatorName"
          label="创建人"
          align="center"
        />
        <el-table-column v-if="hasPerm('system:role:setPermission') || hasPerm('system:role:edit') || hasPerm('system:role:delete')" label="操作" width="256" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="hasPerm('system:role:setPermission')"
              size="mini"
              type="success"
              @click="assignPermission(scope.$index, scope.row)"
            >分配权限</el-button>
            <el-button
              v-if="hasPerm('system:role:edit')"
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-popconfirm
              v-if="hasPerm('system:role:delete')"
              title="确定删除吗？"
              style="margin-left:9px;"
              @onConfirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                :disabled="scope.row.roleName == 'admin'"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      class="paging"
      :page-size="page.pageSize"
      @current-change="jumpPage"
    />
    <el-dialog
      v-if="dialog.createVisible"
      title="添加管理员"
      :visible.sync="dialog.createVisible"
      width="42%"
      :before-close="handleClose"
    >
      <create ref="create" @success="reload" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.createVisible = false">取 消</el-button>
        <el-button type="primary" @click="Save('create')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dialog.editVisible"
      title="编辑管理员"
      :visible.sync="dialog.editVisible"
      width="42%"
      :before-close="handleClose"
    >
      <edit ref="edit" :role="rowData" @success="reload" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.editVisible = false">取 消</el-button>
        <el-button type="primary" @click="Save('edit')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dialog.permissionVisible"
      title="分配权限"
      :visible.sync="dialog.permissionVisible"
      width="32%"
      :before-close="handleClose"
    >
      <permission ref="permission" :role="rowData" @success="reload" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.permissionVisible = false">取 消</el-button>
        <el-button type="primary" @click="Save('permission')">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import create from './create.vue'
import edit from './edit.vue'
import permission from './permission.vue'
import { pageRole, deleteRole } from '@/api/role'
import moment from 'moment'
export default {
  name: 'VueElementAdminIndex',
  components: {
    create, edit, permission
  },
  data() {
    return {
      tableData: [],
      formInline: {
        roleName: '',
        roleCode: ''
      },
      dialog: {
        createVisible: false,
        editVisible: false,
        permissionVisible: false
      },
      totalCount: 0,
      rowData: {},
      page: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    console: () => console,
    window: () => window
  },
  mounted() {
    this.loadData()
  },
  methods: {
    /** 加载数据 */
    loadData() {
      pageRole(Object.assign(this.page, this.formInline)).then(res => {
        res.data.items.forEach(m => {
          m.edit = false
        })
        this.tableData = res.data.items
        this.totalCount = res.data.totalCount
      })
    },
    onSearch() {
      this.loadData()
    },
    /** 关闭提示 */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    /** 保存数据 */
    Save(ref) {
      this.$refs[ref].submitForm('ruleForm')
    },
    /** 重载数据 */
    reload() {
      this.dialog.createVisible = false
      this.dialog.editVisible = false
      this.dialog.permissionVisible = false
      this.loadData()
    },
    /** 格式化数据 */
    formatterDate(row, column, cellValue, index) {
      if (cellValue) {
        return moment(cellValue).format('YYYY-MM-DD')
      } else {
        return '-'
      }
    },
    /** 编辑 */
    handleEdit(index, row) {
      this.rowData = row
      this.dialog.editVisible = true
    },
    jumpPage(page) {
      this.page.pageIndex = page
      this.loadData()
    },
    handleDelete(index, row) {
      deleteRole({ id: row.id }).then(res => {
        this.loadData()
      })
    },
    assignPermission(index, row) {
      this.rowData = row
      this.dialog.permissionVisible = true
    }
  }
}
</script>
<style>
.demo-form-inline .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width:159px
}
</style>
